<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>录波总览</title>

  <div th:replace="common :: common_header"></div>
</head>
<body>
<div th:replace="common::#leftmenu"></div>
<div class="main-content">
  <form th:action="@{/process.html}">
    <input type="hidden" name="baseUrl" th:value="getwave"/>
    <div class="col-sm-9">
      <label>
        <input id="select_all" type="checkbox" onchange="selectAll(this)">全选
      </label>
      <label th:each="wavehead:${waveHeads}" class="check-box checkbox-line" onchange="doChange()">
        <input id="wavehead" name="id" type="checkbox" th:value="${wavehead.id}"
               th:text="${wavehead.type+#dates.format(wavehead.happenTime,'yyyy-MM-dd HH:mm:ss')}+':'+${#numbers.formatInteger(wavehead.millsecond,4)}"/>
      </label>
    </div>
    <div class="col-sm-10">
      <button class="btn-outline-primary" type="submit">获取录波数据</button>
    </div>
  </form>
</div>
</body>
<script type="text/javascript">
  function selectAll(dom) {
    var ids = document.getElementsByName(`id`);
    var i=0;
    if(dom.checked){
      for (i=0; i<ids.length; i++){
        ids[i].checked = true;
      }
    }else {
      for (i=0; i<ids.length; i++){
        ids[i].checked = false;
      }
    }
  }
  function doChange() {
    var ids = document.getElementsByName(`id`);
    var i=0;
    for (i=0; i<ids.length; i++){
      if(ids[i].checked === false){
        document.getElementById("select_all").checked = false;
        return;
      }
    }
    document.getElementById("select_all").checked = true;
  }
</script>
</html>